Hiểu về cấu trúc cơ bản của trang web HTML và các thành phần chính
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn để tạo ra các trang web. HTML không phải là ngôn ngữ lập trình, mà là ngôn ngữ đánh dấu sử dụng các thẻ (tags) để định nghĩa cấu trúc và nội dung của trang web.
Định nghĩa các phần như header, nav, main, footer
Text, hình ảnh, video, links và các media khác
Thu thập thông tin từ người dùng
Liên kết giữa các trang và tài nguyên
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tiêu đề trang web</title>
</head>
<body>
<!-- Nội dung trang web được viết ở đây -->
<h1>Xin chào thế giới!</h1>
<p>Đây là đoạn văn đầu tiên của tôi.</p>
</body>
</html>Thẻ <head> chứa metadata - thông tin về trang web mà không hiển thị trực tiếp cho người dùng. Đây là nơi trình duyệt, search engines và các công cụ khác đọc thông tin về trang.
<head>
<!-- 1. Mã hóa ký tự -->
<meta charset="UTF-8">
<!-- 2. Responsive cho mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3. Tiêu đề trang (hiển thị trên tab) -->
<title>Tiêu đề trang web của bạn</title>
<!-- 4. Meta description (SEO) -->
<meta name="description" content="Mô tả ngắn gọn về trang web">
<meta name="keywords" content="từ khóa, HTML, web development">
<meta name="author" content="Tên tác giả">
<!-- 5. Open Graph cho social media -->
<meta property="og:title" content="Tiêu đề khi share">
<meta property="og:description" content="Mô tả khi share">
<meta property="og:image" content="https://example.com/image.jpg">
<!-- 6. Favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- 7. CSS Stylesheets -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto">
<!-- 8. JavaScript (nếu cần load trước) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- 9. Preload resources -->
<link rel="preload" href="important-font.woff2" as="font" type="font/woff2" crossorigin>
</head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tiêu đề trang</title>
<meta name="description" content="...">
<link rel="stylesheet" href="style.css">
fonts.googleapis.com<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO Meta tags -->
<title>Khóa học HTML miễn phí - Học từ cơ bản đến nâng cao</title>
<meta name="description" content="Học HTML từ cơ bản đến nâng cao với các ví dụ thực tế. Khóa học miễn phí, dễ hiểu, phù hợp cho người mới bắt đầu.">
<meta name="keywords" content="HTML, web development, khóa học, miễn phí, cơ bản">
<meta name="author" content="DevCamp">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://devcamp.edu.vn/html-course">
<meta property="og:title" content="Khóa học HTML miễn phí">
<meta property="og:description" content="Học HTML từ cơ bản đến nâng cao">
<meta property="og:image" content="https://devcamp.edu.vn/images/html-course.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://devcamp.edu.vn/html-course">
<meta property="twitter:title" content="Khóa học HTML miễn phí">
<meta property="twitter:description" content="Học HTML từ cơ bản đến nâng cao">
<meta property="twitter:image" content="https://devcamp.edu.vn/images/html-course.jpg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Stylesheets -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
<link rel="stylesheet" href="css/main.css">
<!-- Preload critical resources -->
<link rel="preload" href="fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
<!-- Additional meta for better UX -->
<meta name="theme-color" content="#667eea">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://devcamp.edu.vn/html-course">
</head><meta charset="UTF-8"> luôn đặt đầuĐịnh nghĩa cấu trúc và layout của trang web, giúp tổ chức nội dung một cách logic.
<header> <nav> <main> <section> <article> <aside> <footer>
Định dạng và hiển thị text, từ tiêu đề đến đoạn văn, danh sách và formatting.
<h1-h6> <p> <strong> <em> <ul> <ol> <li>
Tạo liên kết giữa các trang và nhúng media như hình ảnh, video, audio.
<a> <img> <video> <audio> <iframe>
Tạo biểu mẫu để thu thập thông tin từ người dùng như đăng nhập, đăng ký, liên hệ.
<form> <input> <textarea> <select> <button>
Hiển thị dữ liệu dạng bảng với hàng và cột, thường dùng cho data tabular.
<table> <tr> <td> <th> <thead> <tbody>
Tạo các container để nhóm và sắp xếp nội dung, hỗ trợ CSS layout.
<div> <span> <container> <wrapper>
<!-- Cú pháp: <tagname>nội dung</tagname> -->
<h1>Đây là tiêu đề</h1>
<p>Đây là đoạn văn</p>
<div>Đây là container</div>
<strong>Văn bản in đậm</strong>
<!-- Thẻ có thể chứa thẻ khác (nested) -->
<div>
<h2>Tiêu đề con</h2>
<p>Đoạn văn bên trong div</p>
</div><!-- Cú pháp: <tagname> hoặc <tagname /> -->
<img src="image.jpg" alt="Mô tả ảnh">
<br> <!-- Xuống dòng -->
<hr> <!-- Đường kẻ ngang -->
<input type="text" placeholder="Nhập text">
<meta charset="UTF-8">
<!-- XHTML style (optional) -->
<img src="image.jpg" alt="Mô tả ảnh" />
<br />
<hr /><!-- Cú pháp: <tagname attribute="value"> -->
<!-- Thuộc tính phổ biến -->
<div id="header" class="container main-header">
<img src="logo.png" alt="Logo công ty" width="200" height="100">
<a href="https://google.com" target="_blank" title="Đến Google">
Liên kết đến Google
</a>
</div>
<!-- Thuộc tính data tùy chỉnh -->
<div data-user-id="123" data-role="admin">User Info</div>
<!-- Thuộc tính boolean -->
<input type="checkbox" checked>
<button disabled>Nút bị vô hiệu hóa</button>Thẻ cấu trúc (Structural Tags) là những thẻ HTML5 semantic được thiết kế để định nghĩa rõ ràng các phần khác nhau của trang web. Chúng giúp tổ chức nội dung một cách logic và có ý nghĩa.
Phần đầu của trang web hoặc section, thường chứa logo, menu điều hướng, tiêu đề chính.
Khu vực chứa các liên kết điều hướng chính của trang web.
Nội dung chính và độc nhất của trang web. Mỗi trang chỉ có một thẻ main.
Một phần độc lập và có ý nghĩa của tài liệu, thường có tiêu đề riêng.
Nội dung độc lập, có thể tái sử dụng như bài viết, bài post, comment.
Nội dung phụ, liên quan gián tiếp đến nội dung chính như sidebar, quote.
Phần cuối của trang web hoặc section, chứa thông tin liên hệ, copyright.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cấu trúc HTML5 Semantic</title>
</head>
<body>
<!-- Header của trang -->
<header>
<h1>Logo Website</h1>
<nav>
<ul>
<li><a href="/">Trang chủ</a></li>
<li><a href="/about">Giới thiệu</a></li>
<li><a href="/services">Dịch vụ</a></li>
<li><a href="/contact">Liên hệ</a></li>
</ul>
</nav>
</header>
<!-- Nội dung chính -->
<main>
<!-- Phần giới thiệu -->
<section id="hero">
<h2>Chào mừng đến với website của chúng tôi</h2>
<p>Đây là phần giới thiệu chính của trang web.</p>
</section>
<!-- Phần bài viết -->
<section id="articles">
<h2>Bài viết mới nhất</h2>
<article>
<header>
<h3>Tiêu đề bài viết 1</h3>
<p><time datetime="2024-03-15">15 tháng 3, 2024</time></p>
</header>
<p>Nội dung bài viết đầu tiên...</p>
<footer>
<p>Tác giả: John Doe</p>
</footer>
</article>
<article>
<header>
<h3>Tiêu đề bài viết 2</h3>
<p><time datetime="2024-03-10">10 tháng 3, 2024</time></p>
</header>
<p>Nội dung bài viết thứ hai...</p>
<footer>
<p>Tác giả: Jane Smith</p>
</footer>
</article>
</section>
</main>
<!-- Sidebar -->
<aside>
<section>
<h3>Bài viết phổ biến</h3>
<ul>
<li><a href="#">Học HTML từ cơ bản</a></li>
<li><a href="#">CSS cho người mới</a></li>
<li><a href="#">JavaScript căn bản</a></li>
</ul>
</section>
<section>
<h3>Quảng cáo</h3>
<p>Nội dung quảng cáo hoặc banner</p>
</section>
</aside>
<!-- Footer của trang -->
<footer>
<section>
<h3>Liên hệ</h3>
<p>Email: contact@example.com</p>
<p>Phone: (84) 123-456-789</p>
</section>
<section>
<h3>Theo dõi chúng tôi</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
</section>
<p>© 2024 Website Name. All rights reserved.</p>
</footer>
</body>
</html>Hãy tạo cấu trúc HTML cho một trang blog cá nhân với các yêu cầu sau:
<!--
🎯 YÊU CẦU:
1. Header: Logo "My Blog" + Navigation menu (Home, About, Blog, Contact)
2. Main content area với:
- Hero section: Tiêu đề chính và mô tả
- Articles section: 2 bài viết blog
- Mỗi article có: tiêu đề, ngày đăng, nội dung, tác giả
3. Aside sidebar với:
- Recent Posts (3 links)
- Categories (Frontend, Backend, Design)
4. Footer với: Copyright và social links
✅ SỬ DỤNG:
- header, nav, main, section, article, aside, footer
- Cấu trúc đúng và có ý nghĩa
- Thẻ time cho ngày tháng
- Proper heading hierarchy (h1, h2, h3...)
-->
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog - Trang cá nhân</title>
</head>
<body>
<!-- Bắt đầu code của bạn ở đây -->
<!-- Kết thúc code -->
</body>
</html><!--
🏢 YÊU CẦU LANDING PAGE:
1. Header: Logo + Navigation (Home, Services, About, Contact)
2. Main với 4 sections:
- Hero: Tiêu đề lớn + Call-to-action
- Services: 3 dịch vụ chính (mỗi cái là một article)
- About: Giới thiệu công ty
- Testimonials: 2 testimonial (sử dụng blockquote)
3. Aside: Contact form hoặc Quick links
4. Footer: Company info + Links + Copyright
💡 GỢi Ý STRUCTURE:
header > nav
main > section#hero + section#services + section#about + section#testimonials
aside > contact info
footer > company details
-->
<!-- Hãy tạo structure cho landing page này --><section> và <article> là gì?<aside>?<header> và <footer> không?<main> per page?<nav> có bắt buộc phải có trong <header> không?Trong Bài 2, chúng ta sẽ đi sâu vào nhóm thẻ văn bản (Text Tags) và học cách định dạng text, tạo tiêu đề, đoạn văn, danh sách và các formatting cơ bản.